import React from 'react';
import { Radio } from 'antd';

const TableFilter = ({ clearFilters, confirm, filters, selectedKeys, setSelectedKeys }) => {
    const radioGroupStyle = {
        paddingLeft: 16,
        paddingRight: 16,
        maxHeight: 180,
        overflow: 'auto'
    };
    const radioStyle = {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
        maxWidth: 200,
        minWidth: 80,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
    };
    const renderItems = () => {
        if (filters && filters.length > 0) {
            return filters.map(item => (
                <Radio style={radioStyle} value={item.value} key={item.value}>
                    <span title={item.text}>{item.text}</span>
                </Radio>
            ));
        }
        return '';
    };
    const onChange = e => {
        if (e.target.value === 'all') {
            clearFilters();
            return;
        }
        setSelectedKeys(e.target.value || e.target.value === 0 ? [e.target.value] : []);
        confirm();
    };
    return (
        <Radio.Group
            style={radioGroupStyle}
            onChange={onChange}
            value={selectedKeys && (selectedKeys[0] || selectedKeys[0] === 0) ? selectedKeys[0] : 'all'}
        >
            <Radio style={radioStyle} value="all" key="all">
                全部
            </Radio>
            {renderItems()}
        </Radio.Group>
    );
};

export default TableFilter;
